{include file="public/header" /}
<style type="text/css">
    .pic-list li {
        margin-bottom: 5px;
    }
</style>
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('authGroup/index')}">角色管理</a></li>
        <li><a href="{:url('authGroup/add')}">角色管理</a></li>
        <li class="active"><a href="javascript:;">权限设置</a></li>
    </ul>
    <form method="post" class="js-ajax-form margin-top-20">
        <div class="table-full">
            <table class="table table-bordered treeTable" id="authRule-tree">
                {foreach name="menu" item="vo"}
                    <tr id="node-{$vo.id}" class="initialized parent collapsed" style="">
                        <td style="padding-left:30px;">
                            <span style="padding-left: 20px" class="expander"></span>
                            <input type="checkbox" name="menuId[]" value="{$vo.id}" level="{$vo.level}" {php}if(in_array($vo['id'], $rules))echo 'checked'{/php} onclick="checkNode(this);">{$vo.name}
                        </td>
                    </tr>
                    {foreach name="$vo['children']" item="vo2"}
                        <tr id="node-{$vo2.id}" class="child-of-node-{$vo.id} initialized" style="">
                            <td style="padding-left:60px;">
                                <span style="padding-left: 20px" class="expander"></span>
                                　└────
                                <input type="checkbox" name="menuId[]" value="{$vo2.id}" level="{$vo2.level}" {php}if(in_array($vo2['id'], $rules))echo 'checked'{/php} onclick="checkNode(this);">{$vo2.name}
                            </td>
                        </tr>
                        {foreach name="$vo2['children']" item="vo3"}
                            <tr id="node-{$vo3.id}"  class="child-of-node-{$vo2.id} initialized" style="">
                                <td style="padding-left:90px;">
                                    <span style="padding-left: 20px" class="expander"></span>
                                    　└────
                                    <input type="checkbox" name="menuId[]" value="{$vo3.id}" level="{$vo3.level}"  {php}if(in_array($vo3['id'], $rules))echo 'checked'{/php} onclick="checkNode(this);">{$vo3.name}
                                </td>
                            </tr>
                        {/foreach}
                    {/foreach}
                {/foreach}
            </table>
            <div class="form-actions">
                <input type="hidden" name="id" value="{$params['id']}" />
                <button class="btn btn-primary js-ajax-submit" type="button">保存</button>
                <a class="btn btn-default" href="{:url('authGroup/index')}">返回</a>
            </div>
        </div>
    </form>
</div>
<script src="{$static}js/layer/layer.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        Wind.css('treeTable');
        Wind.use('treeTable', function () {
            $("#authRule-tree").treeTable({
                indent: 20,
                expandable : true,
                initialState:"expanded",
                trueDefaultClose:true,
                clickableNodeNames:true
            });
        });
    });

    function checkNode(obj) {
        var chk = $("input[type='checkbox']");

        var count = chk.length;
        var num = chk.index(obj);
        var level_top = level_bottom = chk.eq(num).attr('level');
        for (var i = num; i >= 0; i--) {
            var le = chk.eq(i).attr('level');
            if (le <level_top) {
                chk.eq(i).prop("checked", true);
                var level_top = level_top - 1;
            }
        }
        for (var j = num + 1; j < count; j++) {
            var le = chk.eq(j).attr('level');
            if (chk.eq(num).prop("checked")) {

                if (le > level_bottom){
                    chk.eq(j).prop("checked", true);
                }
                else if (le == level_bottom){
                    break;
                }
            } else {
                if (le >level_bottom){
                    chk.eq(j).prop("checked", false);
                }else if(le == level_bottom){
                    break;
                }
            }
        }
    }

    $(".js-ajax-submit").click(function () {
        $.ajax({
            url: "{:url('authGroup/authorizeAjax')}",
            type: "POST",
            data: $(".js-ajax-form").serialize(),
            dataType: 'json',
            async: false,
            success: function (res) {
                if(res.errorCode === 200){
                    layer.confirm(res.message, {
                        btn:['确认','取消'],
                        success:function(){
                            this.enterEsc = function (event) {
                                if (event.keyCode === 13) {
                                    $(".layui-layer-btn0").click();
                                    return false;
                                }
                            };
                            $(document).on('keydown', this.enterEsc);

                            $(".layui-layer-btn0").on("click",function() {
                                window.location.href = "{:url('authGroup/index')}";
                                return false
                            })
                        },
                        end:function(){
                            $(document).off('keydown',this.enterEsc);
                        }
                    });
                }else {
                    layer.alert(res.message);
                }
            }
        });
        return false;
    });
</script>
</body>
</html>
